
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>welom to hotel</title>
    <script type="text/javascript" src="./js/jquery-3.1.1.js"></script>
    <style type="text/css">
        head,body,h2,h3,div,p,img,a,ul,li,table,tr,td,form,input,option,select{
            margin:0;
            padding: 0;
        }
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }
        /*
          头部css格式
         */
        .theadnav{
            height: 40px;
            border-bottom: solid 2px #A1A1A1;
            line-height: 40px;
        }
        .theadnav a{
            color: blue;
        }
        /*
          内容部分的css样式
        */
        .tbodycontext{
            width: 70%;
            height: 2000px;
            margin: 0 auto;
        }
        .tbodyheadsearch{
            margin-left: 5%;

        }
        .tbodyheadsearch tr{
            height: 40px;
        }
        .tbodyheadsearch tr td:nth-of-type(2n+1){
            height: 40px;
            border: solid 1px #A1A1A1;
            border-right: none;
        }
        .tbodyheadsearch input{
            width:150px;
            height: 40px;
            border: solid 1px #A1A1A1;
            border-left: none;
        }

        .tbodyheadsearch input:last-of-type{
            height: 40px;
            width: 40px;
        }

        .addsalelevelsearch div{
            margin-top: 15px;
        }


        .navsearchrank a{
            width: 50px;
            height: 30px;
            border: solid 1px #A1A1A1;
            background-color: #9BCD9B;
            text-decoration: none;
            color: black;
        }

        .navsearchrank a:hover{
            cursor: pointer;
        }


        .navsearchrank{
            margin-top: 20px;
        }

        ul li{
            list-style: none;
        }

        .contexthotel{
            height: 200px;
            border-bottom: solid 1px #A1A1A1;
        }
        .contexthotel div{
            float: left;
            width: 25%;
            margin-top:15px;
        }

        #controlhotelimage{
            display: none;
            position: absolute;
            left: 32%;
            top: 40%;
        }
        .contexthotel a{
            width: 80px;
            height: 30px;
            background-color: blue;
            color: white;
            text-decoration: none;
        }


        .hotelpaging ul{
            float: left;
            width: 50%;
            margin-top: 20px;
            margin-left: 35%;
        }
        .hotelpaging ul li{
            float: left;
            height: 25px;
            width: 25px;
            border:solid 1px #A1A1A1;
            margin-left: 15px;
            text-align: center;
        }
        .hotelpaging ul li:last-of-type{
            width: 150px;
            border:none;
        }

        .hotelpaging ul li input{
            height: 25px;
            width: 25px;
        }
        .hotelpaging ul li a{
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
<thead>
<div class="theadnav">
    &nbsp &nbsp 你所在位置: &nbsp &nbsp<a href="">网站首页</a> >&nbsp &nbsp
    <a href="">酒店预定</a> >&nbsp &nbsp
    ${}酒店预定
</div>
</thead>
<!-- 地点目的地搜索 酒店名字搜索 -->
<tbody class="clearfix">
<div class="tbodycontext">
    <div class="tbodyheadsearch">
        <form action="" method="post">
            <table>
                <tr>
                    <td>
                        目的地
                    </td>
                    <td>
                        <input type="text" name="searchaddress" style="width: 150px;"
                               placeholder="请输入目的地" onchange="destinationSearch(this)" />
                        &nbsp &nbsp &nbsp&nbsp &nbsp &nbsp&nbsp &nbsp &nbsp
                    </td>
                    <td>
                        关键词
                    </td>
                    <td>
                        <input type="text" name="searchaddress" placeholder="请输入酒店名称" />
                        <input type="submit" value="搜索"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <!-- 酒店搜索地址 -->
    <div class="addsalelevelsearch">
        <div>
            <form action="" method="post">
                <span>位置</span> &nbsp &nbsp &nbsp
                <a href="">不限</a> &nbsp &nbsp &nbsp
                <input type="radio" name="hoteladd" value="${''}" onchange="hotelSiteSearch(this)" />
                浦东机场 &nbsp &nbsp &nbsp
                <input type="radio" name="hoteladd" value="${''}" onchange="hotelSiteSearch(this)"/>
                上海站  &nbsp &nbsp &nbsp
            </form>
        </div>
        <div>
            <form action="" method="post">
                <span>价格</span>  &nbsp &nbsp &nbsp
                <a href="">不限</a> &nbsp &nbsp &nbsp
                <input type="radio" name="hotelsale" value="${''}" onchange="hotelSaleSearch(this)"/>
                ￥150以下 &nbsp &nbsp &nbsp
                <input type="radio" name="hotelsale" value="${''}" onchange="hotelSaleSearch(this)"/>
                ￥150以上 &nbsp &nbsp &nbsp
            </form>
        </div>
        <div>
            <form action="" method="post">
                <span>星级</span> &nbsp &nbsp &nbsp
                <a href="">不限</a> &nbsp &nbsp &nbsp
                <input type="checkbox" name="hotelsale" value="${''}" onchange="hotelStarSearch(this)"/>
                5星级 &nbsp &nbsp &nbsp
                <input type="checkbox" name="hotelsale" value="${''}" onchange="hotelStarSearch(this)"/>
                4星级 &nbsp &nbsp &nbsp
                <input type="checkbox" name="hotelsale" value="${''}" onchange="hotelStarSearch(this)">
                3星级 &nbsp &nbsp &nbsp
                <input type="checkbox" name="hotelsale" value="${''}" onchange="hotelStarSearch(this)"/>
                2星级 &nbsp &nbsp &nbsp
            </form>
        </div>
        <div>
            <form action="" method="post">
                <span>品牌</span> &nbsp &nbsp &nbsp
                <a href="">不限</a> &nbsp &nbsp &nbsp
                <input  type="radio" name="hotelname" value="${''}"
                        onchange="hotelnamesearch(this)"/>
                如家 &nbsp &nbsp &nbsp
                <input  type="radio" name="hotelname" value="${''}"
                        onchange="hotelnamesearch(this)"/>
                莫泰 &nbsp &nbsp &nbsp
            </form>
        </div>
        <div>
            共有${''}家酒店
        </div>
    </div>
    <!-- 酒店展示内容排序 -->
    <div>
        <div class="navsearchrank">
            <a href="#" onmouseover="recommendover(this)" onmouseout="recommendout(this)">推荐排序</a>
            &nbsp &nbsp &nbsp
            <a href="#" onmouseover="recommendover(this)" onmouseout="recommendout(this)">口碑↓</a>
            &nbsp &nbsp &nbsp
            <a href="#" onmouseover="recommendover(this)" onmouseout="recommendout(this)">价格↓</a>
            &nbsp &nbsp &nbsp
            <div style="width: 50%;height: 30px;">
                <p style="display: none;margin-left: 10%;" id="defaultRecommend"> 默认排序</p>
                <p style="display: none;margin-left: 20%;" id="reputationsort">
                    点击好评由高到低排序</p>
                <p style="display: none;margin-left: 30%;" id="pricesort">  价格由高到低排序 </p>
            </div>
        </div>
        <!-- 酒店内容展示 -->
        <div>
            <ul>
                <li class="contexthotel">
                    <div>
                        <img id="showhotelimage" src="./hotelimage/七天酒店/七天酒店1.jpg"
                             style="height: 90%;width: 95%;"/>
                        <div id="controlhotelimage">
                            <img src="./hotelimage/七天酒店/七天酒店1.jpg"/>
                        </div>
                    </div>

                    <div>
                        1 上海如家酒店 ***</br>
                        南公路280号
                    </div>
                    <div>
                        ${''}/5分 超赞</br>
                        ${''}条评论 ${''}好评
                    </div>
                    <div>
                        ￥150</br>
                        <a href="#">查看详情</a>
                    </div>
                </li>
                <li class="contexthotel">
                    <div>
                        <img src="">555
                    </div>
                    <div>
                        1 上海如家酒店 ***</br>
                        南公路280号
                    </div>
                    <div>
                        4.5/5分 超赞</br>
                        41条评论 98%好评
                    </div>
                    <div>
                        ￥150</br>
                        <a href="#">查看详情</a>
                    </div>
                </li>
                <li class="contexthotel">
                    <div>
                        <img src="">555
                    </div>
                    <div>
                        1 上海如家酒店 ***</br>
                        南公路280号
                    </div>
                    <div>
                        4.5/5分 超赞</br>
                        41条评论 98%好评
                    </div>
                    <div>
                        ￥150</br>
                        <a href="#">查看详情</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 分页 -->
    <div class="hotelpaging">
        <ul>
            <li>
                <a href=""> < </a>
            </li>
            <li>
                <a href=""> 1 </a>
            </li>
            <li>
                <a href=""> 2 </a>
            </li>
            <li>
                <a href=""> 3 </a>
            </li>
            <li>
                <a href=""> 4 </a>
            </li>
            <li>
                <a href=""> 5 </a>
            </li>
            <li>
                <a href=""> ... </a>
            </li>
            <li>
                <a href=""> ${""} </a>
            </li>
            <li>
                <a href=""> > </a>
            </li>
            <li>
                <form>
                    跳转到 &nbsp&nbsp
                    <input type="" name=""> &nbsp&nbsp
                    <input type="submit" value="GO">
                </form>
            </li>
        </ul>
    </div>
</div>
</tbody>
<tfoot>

</tfoot>

<script type="text/javascript">
    /*目的地搜索*/
    function destinationSearch(obj){
        $.ajax({
            url:"",
            type:"post",
            data:{"destination":obj.value},
            success:function(result){

            }
        })
    }
    /*酒店地方搜索*/
    function hotelSiteSearch(obj){
        $.ajax({
            url:"",
            type:"post",
            data:{},
            dataType:"json",
            success:function(result){

            },
        });
    }

    /*酒店价格搜索*/
    function hotelSaleSearch(obj){
        $.ajax({
            url:"",
            type:"post",
            data:{},
            dataType:"json",
            success:function(result){

            },
        });
    }
    /*酒店星级搜索*/
    function hotelStarSearch(obj){
        $.ajax({
            url:"",
            type:"post",
            data:{},
            dataType:"json",
            success:function(result){

            },
        });
    }
    /*酒店名字搜索*/
    function hotelnamesearch(obj){
        console.log("555")
        $.ajax({
            url:"",
            type:"post",
            data:{},
            dataType:"json",
            success:function(result){

            },
        });
    }
    /*提示信息的显示和隐藏*/
    function recommendover(obj){
        if(obj.innerHTML =="推荐排序"){
            $('#defaultRecommend').css({'display':'block'});
        }else if(obj.innerHTML =="口碑↓"){
            $('#reputationsort').css({'display':'block'});
        }else{
            $('#pricesort').css({'display':'block'});
        }
    }
    function recommendout(obj){
        if(obj.innerHTML =="推荐排序"){
            $('#defaultRecommend').css({'display':'none'});
        }else if(obj.innerHTML =="口碑↓"){
            $('#reputationsort').css({'display':'none'});
        }else{
            $('#pricesort').css({'display':'none'});
        }
    }
    /*酒店封面照片显示放大*/
    $("#showhotelimage").mouseover(function(){
        $("#controlhotelimage").css({'display':'block'}) ;
    })
    $("#showhotelimage").mouseout(function(){
        $("#controlhotelimage").css({'display':'none'}) ;
    })


</script>

</body>
</html>

